<template>
  <div>
    <el-form :model="formData" :rules="formRules" ref="formData" label-position="top" class="form-data">
      <el-form-item label="类型" prop="type">
        <el-select v-model="formData.type" placeholder="请选择类型" style="width: 100%">
          <el-option :label="item" :value="index + 1" v-for="(item, index) in typeArr" :key="index"/>
        </el-select>
      </el-form-item>
      <el-form-item label="消息" prop="title">
        <el-input type="textarea" v-model="formData.title" placeholder="请输入轮播标题" maxlength="150" show-word-limit
                  :autosize="{ minRows: 7 }"/>
      </el-form-item>

      <el-form-item class="form-button">
        <el-button class="but-view" @click="drawerClose">取 消</el-button>
        <el-button class="but-view" type="primary" @click="onSubmit">提 交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  export default {
    props: {
      entity: Object
    },
    name: 'SwiperForm',
    data() {
      return {
        typeArr: ['企业', '园区', '任务墙'],
        formData: {
          title: null,
          type: null,
          image: null
        },
        formRules: {
          title: [
            { required: true, message: '请输入轮播标题', trigger: 'blur' }
          ],
          type: [
            { required: true, message: '请选择轮播类型', trigger: 'change' }
          ],
          image: [
            { required: true, message: '请选择轮播图片', trigger: 'change' }
          ]
        }
      }
    },
    beforeMount() {
      if (this.entity) this.formData = JSON.parse(JSON.stringify(this.entity))
    },
    methods: {
      /**
       * 提交事件
       */
      onSubmit() {
        this.$refs['formData'].validate(async(valid) => {
          if (!valid) return false
          const url = this.formData.id ? '/wx/marquee/updateMarquee' : '/wx/marquee/add'
          await this.$ajax.post(url, this.formData)
          this.$message.success('操作成功')
          this.$emit('refresh')
          this.drawerClose()
        })
      },
      /**
       * 取消事件
       */
      drawerClose() {
        this.$emit('close')
      }
    }
  }
</script>

<style scoped lang="scss">
  .image-view {
    width: 100%;
    position: relative;
    .el-icon-circle-close {
      font-size: 30px;
      color: red;
      position: absolute;
      top: 10px;
      right: 10px;
      z-index: 100;
    }
    .el-icon-circle-close:hover {
      cursor: pointer;
    }
  }
</style>
